<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
     
      <text class="title" @click="open">{{ title }}</text>
    </view>

    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'OK' : 'NOT' }}</view>
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>

    <view v-if="showArrList">
      <view v-for="item in arr" :key="item.id" style="color:#ff0000;">
        {{ JSON.stringify(item) }}
      </view>
    </view>

    <view v-for="(item, index) in 6" :key="index" style="color: #00ff00; text-align: center;">
      <view :class="'list-' + (index % 2)">{{ index + 2 }}</view>
    </view>

    <view v-for="(value, name, index) in object" :key="index">
      {{ index }}---{{ name }}---{{ value }}
    </view>

    <view v-for="item in arr" :key="item.id" style="text-align: center;">
      <view style="color:#333300;">{{ item.id }}:{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 6,
      ok: true,
      message: 'Hello Vue!',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'wechat' },
      ],
      object: {
        title: '今天天气怎么样',
        author: '非常好',
        publishedAt: '2025-10-14'
      },
      showArrList: true 
    }
  },
  methods: {
  
    open() {
      this.title = "迎接美好的一天";
      this.ok = !this.ok; 
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}
.logo {
  width: 120rpx;
  height: 120rpx;
  margin-top: 100rpx;
}
.text-area {
  margin-top: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
</style>